<template>
  <!-- 首页 -->
  <div class="home">


    <!-- 轮播图 -->
    <!-- 
    <el-carousel :interval="4000" height="400px" type="card" >
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
      <img src="http://www.gec-edu.org/Uploads/202007/5f1a901a9579d.jpg" alt="">
    </el-carousel-item>
  </el-carousel> -->

    <el-carousel :interval="5000" arrow="always" height="400px">
      <el-carousel-item v-for="item in bannerData" :key="item.advert_id">
        <img :src="item.advert_src" alt="">
      </el-carousel-item>
    </el-carousel>

    <!-- 课程 -->
    <div class="news-head">
      <div class="item-title-area flex-row">
        <div class="title-side-left flex-row">
          <div class="line"></div>
          <div class="broken-line"></div>
          <div class="dot"></div>
        </div>
        <div class="item-title-text">视频中心</div>
        <div class="title-side-right flex-row">
          <div class="dot"></div>
          <div class="broken-line"></div>
          <div class="line"></div>
        </div>
      </div>
      <!-- <div class="more"><a href="/zhuanti" target="_blank">更多 &gt;</a></div> -->
    </div>

    <!-- 课程选择 -->

    <div class="course-content" array="">
      <div class="course-row flex-row">
        <div class="course-item" v-for="(item, index) in video_list" :key="item.video_id"
          @click="toVideoDetail(item.video_id)">
          <div class="course-item-pic-area"><img :src="item.video_pic"></div>
          <!-- <div class="course-title">{{ item.video_navigate }}</div> -->
          <div class="detail">
            <p>{{ item.video_title }}</p>
            <div class="video_author">
              <span>作者：{{ item.video_author }}</span>
              <span>{{ item.video_create_time }}</span>
            </div>
          </div>
        </div>




      </div>

    </div>
    <!-- 视频分页情况 -->

    <div class="paging">

      <el-pagination background layout="prev, pager, next" :total="total" @current-change="changCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { banner, video, videoCount, videoItem } from '../http/request'
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',

      // 获取轮播图的数据
      bannerData: [],

      // 视频列表的值
      video_list: [],

      // 数量长度
      total: 0,

      // 默认分页的数量
      page_num: 1,
      page_size: 12

    };
  },

  created() {
    // 获取轮播图数据
    this.getBanner();

    // 获取视频数据
    this.getVideo();

    // 获取视频的数量

    this.getCount();

    console.log('我进来了');
    // console.log('request', request);
  },
  methods: {
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },

    // 模板
    //  async getVideo() {
    //   // await testApi().then(
    //   //   content => {
    //   //     let { data } = content;
    //   //     console.log(data)
    //   //   }
    //   // )
    // }

    // 轮播图数据请求
    async getBanner() {
      await banner().then(
        res => {
          this.bannerData = res.data.result;
        }
      )
    },

    // 获取视频列表
    async getVideo() {
      await videoItem({
        page_num: this.page_num,
        page_size: this.page_size
      }).then(
        res => {
          let { data } = res;
          console.log(data)

          this.video_list = data.result
        }
      )
    },
    // 获取视频数量
    async getCount() {
      await videoCount().then(
        res => {
          // let { data } = content;
          // console.log('')
          console.log('res', res);

          this.total = res.data.total;

          // this.video_list = data.result
        }
      )
    },

    // 页数改动 重新请求数据
    changCount(e) {
      console.log('e', e);

      this.page_num = e;

      this.getVideo();
    },


    // 点击跳转
    toVideoDetail(video_id) {
      this.$router.push({ path: "/videodetail", query: { video_id } })
    }

  },
  mounted(){
    document.title = "视频主页"
  }
}
</script>

<style lang="scss">
.home {
  padding-top: 20px;


  .el-carousel__container {

    img {
      width: 100%;
      height: 100%;
    }
  }

  .news-head {
    position: relative;
    width: 1200px;
    margin: auto;

    .item-title-area {
      margin: 0px auto;
      width: 606px;
      height: 30px;
      padding-top: 60px;
      padding-bottom: 30px;
    }

    .title-side-left {
      height: 12px;
      position: relative;
      align-self: flex-start;
    }

    .title-side-left .line {
      width: 200px;
      height: 1px;
      background-color: rgb(6, 79, 244);
      align-self: flex-start;
      margin-right: 13px;
    }

    .title-side-left .broken-line {
      width: 15px;
      height: 1px;
      background-color: rgb(6, 79, 244);
      transform: rotate(45deg);
      align-self: center;
      position: absolute;
      right: 0px;
    }

    .title-side-left .dot {
      height: 6px;
      width: 6px;
      background-color: rgb(6, 79, 244);
      border-radius: 50%;
      align-self: flex-end;
      position: absolute;
      right: 0px;
      bottom: -2px;
    }

    .item-title-text {
      font-size: 30px;
      align-self: center;
      margin: 0px 30px;
    }

    .title-side-right {
      height: 12px;
      position: relative;
      align-self: flex-end;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
    }

    .title-side-right .dot {
      height: 6px;
      width: 6px;
      background-color: rgb(6, 79, 244);
      border-radius: 50%;
      position: absolute;
      align-self: flex-start;
      left: 0px;
      top: -2px;
    }

    .title-side-right .broken-line {
      width: 15px;
      height: 1px;
      background-color: rgb(6, 79, 244);
      transform: rotate(45deg);
      align-self: center;
      position: absolute;
      left: 0px;
    }

    .title-side-right .line {
      width: 200px;
      height: 1px;
      background-color: rgb(6, 79, 244);
      align-self: flex-end;
      margin-left: 13px;
    }


  }

  // .news-head .more {
  //   position: absolute;
  //   right: 60px;
  //   top: 80px;

  //   a {
  //     color: #0068b7;
  //     text-decoration: none;
  //   }
  // }

  .course-row {
    // justify-content: space-between;
    margin-bottom: 25px;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }


  .course-item {
    width: 280px;
    height: 290px;
    padding: 10px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    position: relative;
    margin-top: 20px;
    margin-right: 26.6px;
    cursor: pointer;

    transition: all .2s linear;


    img {
      width: 100%;
      height: 200px;
    }
  }

  .course-item:hover {
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    transform: translate3d(0,-2px,0);
  }



  .course-item:nth-child(4n) {
    margin-right: 0;
  }

  .course-item .video_author {
    display: flex;
    justify-content: space-between;

    font-size: 14px;
    color: gray;
    // position: absolute;
    // z-index: 1;
    // top: 0px;
    // left: 0px;
  }

  .course-item .course-title {
    padding-top: 40px;
    margin-left: 20px;
    font-size: 24px;
    line-height: 24px;
    height: 24px;
    font-weight: bold;
    position: relative;
    z-index: 100;
  }

  .course-item .detail {
    // font-size: 14px;
    // height: 14px;
    // line-height: 14px;
    // margin-top: 9px;
    // margin-left: 20px;
    color: red;
    position: relative;

    // top: 144px;
    // z-index: 100;
  }

  .course-item p {
    height: 42px;
    position: relative;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: 550;
    margin-bottom: 5px;
    color: #18191ccc;

  }

  .course-item p:hover {
    color: #00aeec;
  }


  .course-item-hover-mask {
    position: absolute;
    width: 100%;
    top: 0px;
    height: 100%;
    left: 0px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .paging {
    margin: 40px 0;
    display: flex;
    justify-content: space-around;
  }




}
</style>
